<template>
  <div class="fulfil-box">
    <el-form :inline="true" class="form-search">
      <el-form-item label="所属权益：">
        <el-select size="small" v-model="query.parentRightsId" placeholder="请选择">
          <el-option
            v-for="(item,index) in parentRightsId"
            :key="index"
            :label="item.rightsName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="事项分类：">
        <el-select size="small" v-model="query.itemType" placeholder="请选择">
          <el-option
            v-for="(item,index) in itemTypes"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button size="small" type="primary" class="search-btn" native-type="submit">搜索</el-button>
      <el-button size="small" type="primary" class="search-btn" @click="exportExcelFn">导出Excel</el-button>
    </el-form>
    <div v-if="list.list && list.list.length>0">
      <el-table :data="list.list" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="parentRightsName"
          label="所属权益"
          width="120">
        </el-table-column>
        <el-table-column
          label="事项分类"
          width="100">
          <template slot-scope="scope">
            {{scope.row.itemType | matterFormat}}
          </template>
        </el-table-column>
        <el-table-column
          prop="itemRightsName"
          label="事项细则"
          width="210">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="合作方"
          width="120">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              v-if="scope.row.executeStatus === 0"
              @click="fulfilStatus(scope.row.id,1)"
              size="mini">确认完成</el-button>
            <el-button
                type="default"
                v-if="scope.row.executeStatus === 0"
                @click="fulfilStatus(scope.row.id,2)"
                size="mini">放弃执行</el-button>
            <p v-if="scope.row.executeStatus === 1">已确认完成</p>
            <p v-if="scope.row.executeStatus === 2">已放弃执行</p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-bind="getPaginationProps(list)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        >
      </el-pagination>
    </div>
    <e-placeholder v-else text="暂时没有合同哦" src="/static/images/no_match.png"></e-placeholder>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import api from 'api/merchants'
  import { downloadFile } from 'utils'
  import { pagingList } from 'utils/mixins'
  export default{
    mixins: [pagingList],
    computed: {
      ...mapGetters({
        list: 'fulfil_merchants_list'
      })
    },
    components: {
      mapGetters
    },
    props: {
      id: {}
    },
    data () {
      return {
        query: this.getQuery({
          // merId: 101,
          merId: this.$route.params.id,
          parentRightsId: null,
          itemType: null
        }),
        rightId: '',
        matterType: '',
        parentRightsId: [], // 合同履行模块：所属权益
        itemTypes: [{ // 合同履行模块：事项分类（1：现场广告2：媒体宣传3：商品展示4：活动接待）
          value: '1',
          label: '现场广告'
        }, {
          value: '2',
          label: '媒体宣传'
        }, {
          value: '3',
          label: '商品展示'
        }, {
          value: '4',
          label: '活动接待'
        }]
      }
    },
    created () {
      this.rightTypeFn()
    },
    methods: {
      onSubmit () {
        console.log('submit!')
      },
      fetch (query) { // 初始化获取数据， 分页
        this.rightId = query.parentRightsId
        this.matterType = query.itemType
        this.$store.dispatch('fulfil_merchants_list', query)
      },
      fulfilFn (id, executeStatus) {
        api.fulfil_status({
          id: id,
          executeStatus: executeStatus
        }).then(res => {
          this.list.list.forEach(item => {
            if (item.id === id) {
              if (executeStatus === 1) {
                item.executeStatus = 1
              } else {
                item.executeStatus = 2
              }
            }
          })
        })
      },
      fulfilStatus (id, executeStatus) {
        // 执行状态（默认  0 确认完成  1 放弃执行  2
        if (executeStatus === 2) {
          this.$confirm('您确定放弃执行该权益吗？',
            '提示',
            {type: 'warning'}
          ).then(() => {
            this.fulfilFn(id, executeStatus)
          }).catch(() => {
          })
        } else {
          this.fulfilFn(id, executeStatus)
        }
      },
      rightTypeFn () {
        api.rightType({
          // merId: 101
          merId: this.$route.params.id
        }).then(res => {
          this.parentRightsId = res.data
        })
      },
      exportExcelFn () {
        let fileName = `合同履行列表.xlsx`
        let url = ''
        if (this.rightId === null) {
          url = `/api/sponsored/org/contract/executeList/export?merId=${this.$route.params.id}&matterType=${this.matterType}`
        } else if (this.matterType === null) {
          url = `/api/sponsored/org/contract/executeList/export?merId=${this.$route.params.id}&rightId=${this.rightId}`
        } else {
          url = `/api/sponsored/org/contract/executeList/export?merId=${this.$route.params.id}&parentRightsId=${this.rightId}&itemType=${this.matterType}`
        }
        downloadFile(url, fileName)
      }
    }
  }
</script>
<style lang="scss">
  .fulfil-box{
    margin:35px 60px;
    .form-search{
      /*&.el-form--inline .el-form-item{
        margin-right: 25px;
      }*/
      .el-select {
        width: 220px;
      }
    }
    .el-table thead th{
      background: #f5f5f5;
      font-weight: 500;
    }
    .el-table tbody td{
      height:120px;
    }
  }
</style>
